<!--订单-->
<template>
    <div class='contain'>
      <!-- 搜索区域 -->
        <div class="source">
          <el-form :inline="true"  class="demo-form-inline" size="mini">
            <el-form-item>
           <el-button type="primary" @click="add">新增</el-button>
           </el-form-item>
          <el-form-item >
          <el-input v-model="parames.realname" placeholder="请输入真实姓名"></el-input>
           </el-form-item>
          <el-form-item>
          <el-select v-model="parames.status" placeholder="请选择状态" clearable>
        <el-option label="启用" value="启用"></el-option>
        <el-option label="禁用" value="禁用"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="load">查询</el-button>
  </el-form-item>
</el-form>
        </div>
      <!-- 表格 -->
 
      <div class="table">
              <el-table
            :data="tableData.list"
            style="width: 100%"
            height="calc(100vh - 200px)">
            <el-table-column prop="id" label="订单编号" align="center"></el-table-column>
            <el-table-column prop="name" label="订单名" align="center"></el-table-column>
            <el-table-column prop="num" label="序号" align="center"></el-table-column>
            <el-table-column prop="icon" label="图标" align="center"></el-table-column>
           
        
          
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            
            </template>
          </el-table-column>
  </el-table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.page+1"
          :page-sizes="[5, 8, 10, 12]"
          :page-size="tableData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total">
    </el-pagination>
      </div>
      <!-- 模态框 -->
      <div>
          <el-dialog :title="title" :visible.sync="dialogFormVisible">
           <el-form :model="form">
           <el-form-item label="订单名" :label-width="formLabelWidth">
           <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="序号" :label-width="formLabelWidth">
           <el-input v-model="form.num" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图标" :label-width="formLabelWidth">
           <el-input v-model="form.icon" autocomplete="off"></el-input>
      </el-form-item>
            
         
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
  </div>
</el-dialog>
      </div>
    </div>
</template>

  <script>
// import axios from '@/utils/axios'

import axios from "@/utils/request.js";
import qs from 'qs'
export default {
    // 组件名称
    name: 'demo',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data () {
    return {
      title:"",
      parames:{
        page:0,
        pageSize:10,
      },
      tableData: {},
      formInline: {
      user: '',
      region: ''
      },
      currentPage4: 4,

        dialogFormVisible: false,
        form: {
          type:'category',
          password:'123321',
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
    }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      load() {
        //加载数据
        axios.post("/category/query",this.parames).then((res)=>{
          // console.log(res)
          this.tableData = res.data
        })
      },
      //分页
      handleSizeChange(val) {
        this.parames.pageSize = val
        this.load()
          // console.log(`每页 ${val} 条`);
        },
      handleCurrentChange(val) {
        this.parames.page = val-1
        this.load()

        // console.log(`当前页: ${val}`);
      },
      // 查询
      add() {
        this.title = "新增订单"
        this.dialogFormVisible = true
      },
      //提交
      onSubmit() {
       console.log(this.form,"输入")
       axios.post('/category/saveOrUpdate',this.form).then((res)=> {
        //  console.log(res)
       
        this.$message({
          message: res.message,
          type: 'success'
        });
      this.dialogFormVisible = false
      this.load()
       })
      },
      // 编辑
      handleEdit(index, row) {
        this.title = "修改订单"
        this.dialogFormVisible = true
        this.form = {...row}

      },
      // 删除
      handleDelete(index, row) {
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axios.get('/category/deleteById?id='+row.id).then((res)=>{
            this.load()
           this.$message({
          message: res.message,
          type: 'success'
        });
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
        })
      },
      //详情
       handleDetails(index, row) {
   
        this.$router.push({path:"categoryDetails",query:{row}})

      },

    },
    
    beforeCreate() {
    },
  
    created() {
       this.load()
    },

    beforeMount() {
    },
    
    mounted() {
    },
    
    beforeUpdate() {
    },
  
    updated() {
    },

    activated() {
    },
    
    deactivated() {
    },
  
    beforeDestroy() {
    },
    
    destroyed() {
    }
  }
</script>
<style scoped>

</style>
